<template>
  <div>
    <div class="exampage" v-if="paperInfo">
      <div
        class="exampage-left"
        :class="{
          single: mode === 'detail' || mode === 'score' || mode === 'answer',
        }"
      >
        <div class="exam-name">{{ paperInfo.paper_name }}</div>
        <div class="exam-intro">{{ paperInfo.paper_remark }}</div>
        <!-- <el-alert class="exam-alert" :title="paperInfo.paper_remark" type="info" :closable="false" show-icon>
                </el-alert> -->
        <div class="exam-baseinfo">
          <div class="baseinfo-item">
            姓名:<span v-if="mode === 'exam' || mode === 'answer'">{{
              userName
            }}</span>
            <span v-else>--</span>
          </div>
          <div class="baseinfo-item">
            考试时间:<span>{{ paperInfo.duration }}min</span>
          </div>
          <div class="baseinfo-item">
            总分:<span>{{ paperInfo.total_score }}分</span>
          </div>
          <div class="baseinfo-item" v-if="mode === 'answer'">
            得分:<span>{{ examData.grade }}分</span>
          </div>
        </div>
        <div class="exam-questions">
          <Question
            v-for="(item, index) in questions"
            :answerList.sync="answerList"
            :seq="index + 1"
            :data="item"
            :recordId="recordId"
            :key="index"
            :mode="mode"
          ></Question>
        </div>
      </div>
      <div class="exampage-right" v-if="mode === 'exam'">
        <div class="situation">
          <div class="card">
            <div class="answer">
              <div>答题情况</div>
              <div class="sit-list">
                <div
                  class="sit-item"
                  v-for="(item, index) in answerList"
                  :key="index"
                >
                  {{ index + 1 }}
                  <i
                    v-show="isHaveContent(item.fill_content)"
                    class="el-icon-check fin-icon"
                  ></i>
                </div>
              </div>
            </div>
          </div>
          <div class="card">
            <div>剩余时长</div>
            <el-statistic
              style="margin: 10px 0"
              ref="statistic"
              @finish="handleFinishTime"
              format="HH:mm:ss"
              :value="deadline"
              title=""
              time-indices
            >
            </el-statistic>
          </div>
        </div>
      </div>
    </div>
    <div class="operation-footer">
      <div class="footer-wrap">
        <el-button size="small" @click="handleClickClose">关闭</el-button>
        <!--v-show="mode === 'add'" ruleForm.status === 0 ||  -->
        <el-button
          v-show="mode === 'exam'"
          size="small"
          type="primary"
          @click="handleClickSubmit"
          >提交试卷</el-button
        >
        <el-button
          v-show="mode === 'score'"
          size="small"
          type="primary"
          @click="handleFinishScore"
          >提交打分</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import Question from "../components/question/index";
import {
  ExamRecordList,
  ExamBegin,
  ExamRecordDetail,
  ExamPaperDetail,
  ExamCommit,
  ExamRecordUpdateResult,
} from "@/api/qms.js";
import { commonAddMulty, commonAdd } from "@/utils/mUtils";
export default {
  name: "exampage",
  components: { Question },
  props: [],
  data() {
    return {
      answerList: {},
      questions: [
        {
          question_id: 17,
          question: "问答题",
          question_type: "1",
          question_score: 11,
          question_file: "",
          options: [
            {
              option_id: 0,
              option: "",
              option_content: "",
              option_file: "",
              is_true: 0,
            },
            {
              option_id: 0,
              option: "",
              option_content: "",
              option_file: "",
              is_true: 0,
            },
          ],
        },
        {
          question_id: 16,
          question: "测试选择题勾选正确答案11112",
          question_type: "2",
          question_score: 1112,
          question_file: "",
          options: [
            {
              option_id: 0,
              option: "A",
              option_content: "选项A",
              option_file: "",
              is_true: 0,
            },
            {
              option_id: 0,
              option: "B",
              option_content: "选项B",
              option_file: "",
              is_true: 0,
            },
          ],
        },
        {
          question_id: 16,
          question: "测试选择题勾选正确答案11112",
          question_type: "0",
          question_score: 1112,
          question_file: "",
          options: [
            {
              option_id: 0,
              option: "A",
              option_content: "选项A",
              option_file: "",
              is_true: 0,
            },
            {
              option_id: 0,
              option: "B",
              option_content: "选项B",
              option_file: "",
              is_true: 0,
            },
          ],
        },
      ],
      deadline: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
      recordId: "",
      paperId: "",
      examData: {},
      paperInfo: null,
      mode: "",
      userName: "",
    };
  },
  mounted() {
    const { recordId, paperId } = this.$route.query;
    this.recordId = recordId;
    this.paperId = paperId;
    this.mode = this.$route.query.mode || "";
    this.userName = this.$store.state.user.nickname;
    /**
     * mode exam-考试  score-打分 detail-预览   answer-查看试卷
     */
    if (this.mode === "score" || this.mode === "answer") {
      ExamRecordDetail({
        id: this.recordId * 1, //
      }).then((res) => {
        this.examData = res.data.data;
        this.paperInfo = this.examData.exam_info;
        this.questions = this.paperInfo.questions;
        this.questions.forEach((item) => {
          item.options = item.option_list;
          if (item.question_type === 2) {
            item.fill_content =
              item.fill_content == "" ? [] : item.fill_content.split(",");
          }
          if (item.question_type === 2 || item.question_type === 1) {
            item.cur_score = item.cur_score == 0 ? "" : item.cur_score;
          }
        });
        this.answerList = this.questions.map((item) => {
          return {
            id: item.question_id,
            fill_content: item.fill_content,
          };
        });
      });
    } else if (this.mode === "detail") {
      ExamPaperDetail({
        id: this.paperId * 1, //
      }).then((res) => {
        // this.examData = res.data.data;
        this.paperInfo = res.data.data;
        this.questions = this.paperInfo.questions;
        this.questions.forEach((item) => {
          item.options = item.Options;
          item.score = item.question_score;
          if (item.question_type === "2") {
            item.fill_content =
              item.fill_content == "" ? [] : item.fill_content.split(",");
          }
        });
        this.answerList = this.questions.map((item) => {
          return {
            id: item.question_id,
            fill_content: item.fill_content,
          };
        });
      });
    } else if (this.mode === "exam") {
      ExamBegin({
        record_id: this.recordId * 1, //
        paper_id: this.paperId * 1, // 试卷id
        // "user_id":this.$store.state.user.user_id*1
      }).then((res) => {
        this.examData = res.data.data;
        this.paperInfo = this.examData.paper_info;
        this.questions = this.paperInfo.questions;

        this.answerList = this.questions.map((item) => {
          return {
            question_id: item.question_id,
            fill_content: item.fill_content,
            question_type: item.question_type,
          };
        });
        this.questions.forEach((item) => {
          item.options = item.Options;
          item.score = item.question_score;
          if (item.question_type === "2") {
            item.fill_content =
              item.fill_content == "" ? [] : item.fill_content.split(",");
          }
        });
        this.deadline =
          this.examData.inspection_time * 1000 +
          this.paperInfo.duration * 60 * 1000;
      });
    }
  },
  methods: {
    isHaveContent(val) {
      if (Array.isArray) {
        return Object.keys(val).length;
      } else {
        return val;
      }
    },
    handleFinishTime() {
      this.handleClickSubmit();
    },
    handleClickClose() {
      this.$router.go(-1);
    },
    handleClickSubmit() {
      const _answerList = [...this.answerList];
      _answerList.forEach((item) => {
        if (item.question_type * 1 === 2) {
          if (Array.isArray(item.fill_content)) {
            item.fill_content = item.fill_content.join(",");
          }
        }
      });
      // console.log(_answerList);
      ExamCommit({
        record_id: this.recordId * 1, //
        questions: _answerList,
      }).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "提交成功",
            type: "success",
          });
          this.$router.go(-1);
        }
      });
    },
    handleFinishScore() {
      for (let i = 0; i < this.questions.length; i++) {
        const item = this.questions[i];
        if (item.cur_score > item.score) {
          this.$message({
            type: "warning",
            message: "题目得分不能大于总分！",
          });
          return;
        }
      }
      const _questions = this.questions.map((item) => {
        return {
          question_id: item.question_id,
          cur_score: item.cur_score * 1,
        };
      });
      const scoreArr = _questions.map((item) => item.cur_score);
      const grade = commonAddMulty(...scoreArr);
      this.$confirm(`得分：${grade}, 确定要提交打分吗?`, "提交打分", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        // type: 'warning'
      })
        .then(() => {
          ExamRecordUpdateResult({
            id: this.recordId * 1, //
            // "result":"0", // 结果:0-未通过，1-通过，2-待评
            // "grade":"2", // 总得分
            questions: _questions,
            grade: grade + "",
            result: grade >= this.paperInfo.passing_score ? "1" : "0",
          }).then((res) => {
            if (res.code === 10000) {
              this.$message({
                message: "打分完成",
                type: "success",
              });
              this.$router.go(-1);
            }
          });
        })
        .catch(() => {
          // this.$message({
          //     type: 'info',
          //     message: '已取消删除'
          // });
        });

      return;
    },
  },
};
</script>
<style lang="scss" scoped>
.exampage {
  min-height: 100vh;
  display: flex;

  .exampage-left {
    margin: 5px;
    margin-right: 0;
    flex: 1;
    //
    background: #fff;
    box-sizing: border-box;
    padding: 30px 90px;

    &.single {
      margin: 0 150px;
    }

    .exam-name {
      font-size: 24px;
      line-height: 44px;
      font-weight: bold;
      text-align: center;
    }

    .exam-intro {
      line-height: 34px;
      padding-left: 10px;
      font-size: 15px;
      text-align: justify;
      padding: 10px 20px;
    }

    .exam-alert {
      margin: 10px 0;
    }

    .exam-baseinfo {
      display: flex;
      justify-content: space-between;
      border-bottom: solid 1px #dcdfe6;
      line-height: 36px;
      font-size: 14px;
      padding: 0 20px;
      color: #6f6969;
      margin-bottom: 20px;

      span {
        margin-left: 10px;
      }
    }

    .exam-questions {
      padding: 20px 30px;
    }
  }

  .exampage-right {
    flex: 0 0 300px;
    // background: #fff;
    // margin-left: 10px;
    position: relative;

    .card {
      background: #fff;
      margin: 5px;
      padding: 10px;
    }

    .situation {
      position: sticky;
      top: 40px;

      .sit-list {
        padding: 20px 0;
        margin-left: 34px;

        .sit-item {
          display: inline-block;
          width: 40px;
          height: 35px;
          // background: rebeccapurple;
          border: solid 1px lightgray;
          margin-left: -1px;
          margin-top: -1px;
          text-align: center;
          line-height: 35px;
          position: relative;

          .fin-icon {
            position: absolute;
            top: 18px;
            right: 8px;
            color: rgb(22, 166, 12);
            font-weight: bold;
            font-size: 18px;
          }
        }
      }
    }
  }
}

.operation-footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  background: white;
  box-sizing: border-box;
  padding: 15px 0;
  box-shadow: 0px -10px 20px -10px rgba(0, 0, 0, 0.07);
  z-index: 100;

  .footer-wrap {
    width: 86.3%;
    text-align: center;
  }
}
</style>